<template>
    <div class="introdution">
        <no-ssr>
          <bread :breadList=breadList></bread>
        </no-ssr>
        <div class="introdution-main">
            <div style="float: left;position: relative;">
                <div class="main-nav">
                    <nav-list :list=selfNavList @tonav="navChenge" ref="nav-list" id='nav-flag'></nav-list>
                </div>
            </div>        
            <div class="introdution-main-body main-body-flag">
                <pro-service :descript="descript" title='软件研发' selfImg="/img/insert/develop-img.jpg" :serviceitemList=projectService ref="pro-service"></pro-service>
                <pro-type :proItemList=projectType ref="pro-type"></pro-type>
                <service-flow :serviceFlow=serviceFlowData ref="service-flow"></service-flow>
                <team-qual-type :teamItemList=teamData ref="team-qual-type"></team-qual-type>
                <overlay :overlayItemList=overlayData ref="overlay"></overlay>
                <!-- <business-contact title="业务联系人" :businessItemList=contcatData ref="business-contact"></business-contact> -->
            </div>
        </div>
    </div>
</template>

<script>
import bread from '@/components/breadcrumb'
import navList from '@/components/navList'
import proService from '@/components/publicComponent/proService'
import serviceFlow from '@/components/publicComponent/serviceFlow'
import overlay from '@/components/publicComponent/overlay'
import businessContact from '@/components/publicComponent/businessContact'
import teamQualType from '@/components/develop/teamQualType'
import proType from '@/components/develop/proType'

import {serviceProjectType, developTeam, serviceOverlay, serviceContcat, authorities, profile} from '@/api/getData'
export default {
  data() {
    return{
      breadList: [
        {
        text: '软件研发',
        name: 'develop_introdution'
        },
        {
        text: '业务介绍',
        name: 'develop_introdution'
        }
      ],
      selfNavList: [
          {
              text: '软件研发',
              ref: 'pro-service'
          },
          {
              text: '承接项目类型',
              ref: 'pro-type'
          },
          {
              text: '开发流程',
              ref: 'service-flow'
          },
          {
              text: '服务资质',
              ref: 'team-qual-type'
          },
          {
              text: '覆盖厂商',
              ref: 'overlay'
          }
      ],      
      projectService: [],
      serviceFlowData: {
        title: '开发流程',
        img: '/img/flow/develop_flow.png'
      },
      //覆盖厂商
      overlayData: [],
      // 联系人
      contcatData: [],
      //项目类型数据
      projectType: [],
      //服务资质数据
      teamData: [],
      descript: ''
    }
  },
  async mounted(){
    //项目类型
    await serviceProjectType.call(this,2).then(res=>{
        this.projectType = res;
    })
    //服务资质
    await developTeam.call(this).then(res=>{
        this.teamData = res;
    })
    //覆盖厂商
    await serviceOverlay.call(this,1).then(res=>{
        this.overlayData = res;
    })
    // 联系人
  //   serviceContcat.call(this, 6).then(res=>{
  //       this.contcatData = res;
  //   })
    await authorities.call(this, 2).then(res=>{
        this.projectService = res;
    })
    await profile.call(this, 2).then(res=>{
      this.descript = res[0].descript;
    })
    this.$refs['nav-list'].addNavEvent()
  },
 
  components: {
    bread,
    navList,
    proService,
    serviceFlow,
    overlay,
    businessContact,
    teamQualType,
    proType
  },
  methods: {
    navChenge(key){
      document.body.scrollTop = this.$refs[key].$el.offsetTop +230; 
　　   document.documentElement.scrollTop = this.$refs[key].$el.offsetTop +230;
    }
  }
}
</script>

<style lang="stylus" scoped>
.introdution{
    width: 1200px;
    padding-top: 20px;
    margin: 0 auto; 
    border-bottom: 1px solid transparent;
}
.introdution-main{
   position: relative;
    .introdution-main-body{
        margin-left: 246px;
    }    
}
</style>
